// pages/feedback/feedback.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [{
      id: 0,
      value: '体验问题',
      isActive: true
    },
    {
      id: 1,
      value: '商品.商家投诉',
      isActive: false
    }],
    // 被选择的图片路径数组
    chooseImgs: [],
    textVal: ''
  },
  //外网的图片路径数组
  UpLoadImgs: [],
  //从子组件传过来
  handleTabsItemChange(e) {
    // console.log(e);
    //1.获取点击的索引
    const { index } = e.detail
    // 2.修改原数组
    console.log(this.data);
    let { tabs } = this.data
    //
    tabs.forEach((v, i) => i == index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  },
  //点击+选择图片
  handleChooseImg() {
    // 调用小程序内置的api
    wx.chooseImage({
      //图片数量
      count: 9,
      //图片格式 原图 压缩图
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        // console.log(result);
        this.setData({
          //用户第二次选择 图片会重置 所以图片进行拼接
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
        })
      },
      fail: () => { },
      complete: () => { }
    });

  },
  //点击自定义图片组件
  handleRemoveImg(e) {
    //获取被点击组件索引
    const { index } = e.currentTarget.dataset;
    console.log(index);
    //获取data图片数组
    let { chooseImgs } = this.data
    //删除元素
    chooseImgs.splice(index, 1)
    this.setData({
      chooseImgs
    })
  },
  //文本域输入事件
  handleTextInput(e) {
    this.setData({
      textVal: e.detail.value
    })
  },
  //提交按钮的点击事件
  handleFormSubmit() {
    //获取文本域的内容
    const { textVal, chooseImgs } = this.data
    //验证文本域是否为空
    if (!textVal.trim()) {
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true,
      });
      return
    }
    //上传图片到服务器
    //上传文件api 不支持多个文件同时上传  便利数组一个一个上传
    //显示等待的图片
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });
    // 判断有没有需要上传的图片数组
    if (chooseImgs.length != 0) {
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          //图片上传到哪里
          url: 'https://img.coolcr.cn/api/upload',
          //上传文件路径
          filePath: v,
          //上传的文件的名称 后台获取文件 file
          name: "image",
          //顺带的文本信息
          formData: {},
          success: (result) => {
            console.log(result);
            let url = JSON.parse(result.data).data.url;
            //将成功上传到服务器到地址返回存储
            this.UpLoadImgs.push(url);
            // console.log(this.UpLoadImgs);
            //所有图片都上传完毕
            if (i == chooseImgs.length - 1) {
              wx.hideLoading();
              console.log("把文本的内容和外网的图片数组 提交到后台中");
              this.setData({
                textVal: '',
                chooseImgs: []
              })
              wx.navigateBack({
                delta: 1
              });

            }
          },
        });
      })
    }
  }
})